<%@ include file="init.jsp"%>



<ts:pageTemplate>
	<div class="container">
		<div>
			<div class="row-fluid">
				<span class="span6">
					<div class="chartContainer" id="chartContainer2"
						style="max-width: 800px; height: 400px;"></div>
				</span> <span class="span6">
					<div class="chartContainer" id="chartContainer1"
						style="max-width: 800px; height: 400px;"></div>
				</span>
			</div>
		</div>
	</div>

	<script type="text/javascript">

	$("#chartContainer1").dxCircularGauge({
	    rangeContainer: {
	        backgroundColor: 'none',
	        ranges: [{
	            startValue: 0,
	            endValue: 30,
	            color: '#A6C567'
	        }, {
	            startValue: 30,
	            endValue: 70,
	            color: '#FCBB69'
	        }, {
	            startValue: 70,
	            endValue: 100,
	            color: '#E19094'
	        }]
	    },
	    needles: [{ value: 24 }],
	    markers: [{ value: 27 }],
	    title: "Your results"
	});
	
	
	
	var dataSource = [
	                  {	name: "fb! One", points: 12 },
	                  { name: "f! Two", points: 7 },
	                  { name: "f! Three", points: 7 },
	              ];

	              $("#chartContainer2").dxPieChart({
	                  size:{ 
	                      width: 500
	                  },
	                  dataSource: dataSource,
	                  series: [
	                      {
	                          argumentField: "name",
	                          valueField: "points",
	                          label:{
	                              visible: true,
	                              connector:{
	                                  visible:true,           
	                                  width: 1
	                              }
	                          }
	                      }
	                  ],
	                  title: "General results"
	              });
	</script>

</ts:pageTemplate>
